<!DOCTYPE html>
<html>
    <head>
        <title>终于有form表单事件了!!!!</title>
    </head>
    <body>
        <input id="username">


        <!--全新版本的input的框框-->
        <input type="text" id="selection" value="fuck me!!!">

        <input type="text" id="normal_username">

        <form id="">??????</form>
        <script>
            // form表单有5个事件:oninput,onselect,onreset,onsubmit,onchange
            var username = document.getElementById("username");
            username.oninput = function(e)
            {
                // 这个和键盘事件不一样！！他是输入什么就读什么
                // 键盘是按键之后才读取
                // 这个强调读取输入的内容
                console.log(e.target.value);
                return 0;
            }

            
            // 一个文本框是怎么实现选择的？？？？
            var select_test = document.getElementById("selection");
            select_test.onselect = function(e)
            {
                console.log(e.type);
                console.log("原来是拖拽鼠标进行选中的意思啊。。。。。");
                return 0;
            }
            // 使用onselect的机会并不太多啊？？


            // 真正应用的获取内容操作:onchange
            // 只有输入完回车或指针消失以后才会get内容
            var un = document.getElementById("normal_username");
            un.onchange = function(e)
            {
                console.log(e.target.value);
                // 避免一直在那输出。。。。 
            }


            // 使用VSCode开发VSCode
            // 这个想法没有什么用处
        </script>
    </body>
</html>